<template>
  <view class="coupon-center-container">
    <!-- 顶部标签页 -->
    <u-tabs
      :list="tabList"
      :current="currentTab"
      @change="handleTabChange"
      :is-scroll="false"
    ></u-tabs>

    <!-- 优惠券列表 -->
    <scroll-view
      scroll-y
      class="coupon-list"
      @scrolltolower="loadMore"
      :refresher-enabled="true"
      :refresher-triggered="refreshing"
      @refresherrefresh="refresh"
    >
      <view
        class="coupon-item"
        v-for="(item, index) in couponList"
        :key="index"
      >
        <view class="coupon-content">
          <view class="left">
            <view class="amount">
              <text class="symbol">¥</text>
              <text class="number">{{ item.amount }}</text>
            </view>
            <view class="condition">满{{ item.minAmount }}元可用</view>
          </view>
          <view class="middle">
            <text class="title">{{ item.title }}</text>
            <text class="desc">{{ item.description }}</text>
            <text class="time">{{ item.startTime }} - {{ item.endTime }}</text>
          </view>
          <view class="right">
            <u-button
              size="mini"
              :type="item.received ? 'default' : 'primary'"
              :disabled="item.received"
              @click="receiveCoupon(item)"
            >{{ item.received ? '已领取' : '立即领取' }}</u-button>
          </view>
        </view>
        <view class="coupon-tips">
          <text>{{ item.tips }}</text>
        </view>
      </view>

      <!-- 加载更多 -->
      <u-loadmore
        :status="loadMoreStatus"
        :loading-text="loadingText"
        :loadmore-text="loadMoreText"
        :nomore-text="noMoreText"
      />
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabList: [
        { name: '全部', value: 'all' },
        { name: '商品券', value: 'product' },
        { name: '店铺券', value: 'shop' },
        { name: '平台券', value: 'platform' }
      ],
      currentTab: 0,
      couponList: [],
      page: 1,
      pageSize: 10,
      refreshing: false,
      loadMoreStatus: 'loadmore',
      loadingText: '正在加载...',
      loadMoreText: '点击或上拉加载更多',
      noMoreText: '没有更多了'
    }
  },
  onLoad() {
    this.loadCoupons()
  },
  methods: {
    handleTabChange(index) {
      this.currentTab = index
      this.page = 1
      this.couponList = []
      this.loadCoupons()
    },
    async loadCoupons() {
      if (this.loadMoreStatus === 'loading') return
      
      this.loadMoreStatus = 'loading'
      
      try {
        const res = await this.$api.get('/coupons/center', {
          params: {
            type: this.tabList[this.currentTab].value,
            page: this.page,
            pageSize: this.pageSize
          }
        })
        
        if (this.page === 1) {
          this.couponList = res.data.list
        } else {
          this.couponList = [...this.couponList, ...res.data.list]
        }
        
        this.loadMoreStatus = res.data.list.length < this.pageSize ? 'nomore' : 'loadmore'
      } catch (error) {
        console.error('加载优惠券失败:', error)
        uni.showToast({
          title: '加载失败',
          icon: 'error'
        })
        this.loadMoreStatus = 'loadmore'
      }
    },
    async receiveCoupon(coupon) {
      try {
        await this.$api.post(`/coupons/${coupon.id}/receive`)
        uni.showToast({
          title: '领取成功',
          icon: 'success'
        })
        // 更新优惠券状态
        coupon.received = true
      } catch (error) {
        console.error('领取优惠券失败:', error)
        uni.showToast({
          title: error.response?.data?.message || '领取失败',
          icon: 'error'
        })
      }
    },
    async refresh() {
      this.refreshing = true
      this.page = 1
      await this.loadCoupons()
      this.refreshing = false
    },
    loadMore() {
      if (this.loadMoreStatus === 'nomore') return
      this.page++
      this.loadCoupons()
    }
  }
}
</script>

<style lang="scss" scoped>
.coupon-center-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.coupon-list {
  flex: 1;
  padding: 20rpx;
}

.coupon-item {
  background-color: #ffffff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  overflow: hidden;

  .coupon-content {
    display: flex;
    padding: 30rpx;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 2rpx;
      background: radial-gradient(circle at 2rpx 2rpx, #eee 2rpx, transparent 0) 0 0/10rpx 2rpx repeat-x;
    }

    .left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding-right: 30rpx;
      border-right: 1rpx dashed #eee;
      min-width: 180rpx;

      .amount {
        color: #ff5500;
        display: flex;
        align-items: baseline;

        .symbol {
          font-size: 32rpx;
        }

        .number {
          font-size: 56rpx;
          font-weight: bold;
        }
      }

      .condition {
        font-size: 24rpx;
        color: #999;
        margin-top: 10rpx;
      }
    }

    .middle {
      flex: 1;
      padding: 0 30rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .title {
        font-size: 28rpx;
        color: #333;
        font-weight: bold;
        margin-bottom: 10rpx;
      }

      .desc {
        font-size: 24rpx;
        color: #666;
        margin-bottom: 10rpx;
      }

      .time {
        font-size: 24rpx;
        color: #999;
      }
    }

    .right {
      display: flex;
      align-items: center;
      padding-left: 30rpx;
    }
  }

  .coupon-tips {
    padding: 20rpx 30rpx;
    font-size: 24rpx;
    color: #999;
    background-color: #fafafa;
  }
}
</style> 